<app-common-page>
    <div class="content-left">
        <img src="../../../../assets/img/login-left.jpg" alt="" srcset="">
    </div>
    <div class="content-right">
        <div class="login-form-title">
            登陆
        </div>
        <div class="login-form-body">
            <div class="login-form-tabsset">
                <div class="login-form-tabs" (click)="index = 0">
                    <span class="login-form-tabs-title " [class.login-form-tabs-title-active]="index === 0">邮箱</span>
                    <p *ngIf="index === 0" class="login-form-tabs-title-active-bottom"></p>
                </div>
                <div class="login-form-tabs" (click)="index = 1">
                    <span class="login-form-tabs-title" [class.login-form-tabs-title-active]="index === 1">手机</span>
                    <p *ngIf="index === 1" class="login-form-tabs-title-active-bottom"></p>
                </div>
            </div>
            <form nz-form class="form" [formGroup]="emailForm" *ngIf="emailForm" [hidden]="index != 0">
                <nz-form-item>
                    <nz-form-label style="margin-top: -0.1em !important" [nzSpan]="24" nzFor="email">
                        <label for="">账号 *</label>
                    </nz-form-label>
                    <nz-form-control [nzSpan]="24">
                        <input nz-input formControlName="email" name="email" type="text" id="email" />
                    </nz-form-control>

                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="24" nzFor="password">
                        <label for="">密码 *</label>
                    </nz-form-label>
                    <nz-form-control [nzSpan]="24">
                        <input nz-input formControlName="password" name="password" type="password" id="password">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item class="form-footer">
                    <nz-form-control style="margin-top: 60px !important">
                        <button class="button-login" (click)="submit()"
                            [disabled]="emailForm.invalid">登陆</button>
                    </nz-form-control>
                </nz-form-item>
            </form>
            <form nz-form class="form" [formGroup]="tellphoneForm" *ngIf="tellphoneForm" [hidden]="index != 1">
                <nz-form-item>
                    <nz-form-label style="margin-top: -0.1em !important" [nzSpan]="24" nzFor="tellphone">
                        <label for="">手机 *</label>
                    </nz-form-label>
                    <nz-form-control [nzSpan]="24">
                        <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
                            <ng-template #addOnBeforeTemplate>  
                                <nz-select formControlName="regionNumber" style="width: 70px;">
                                    <nz-option *ngFor="let item of regionNumbers; let i = index"
                                        [nzLabel]="'+' + item.number" [nzValue]="item.number"></nz-option>
                                </nz-select>
                            </ng-template>
                            <input nz-input formControlName="tellphone" name="tellphone" type="tel" id="tellphone" maxlength="11">
                        </nz-input-group>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="24" nzFor="password">
                        <label for="">密码 *</label>
                    </nz-form-label>
                    <nz-form-control [nzSpan]="24">
                        <input nz-input formControlName="password" name="password" type="password">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item class="form-footer">
                    <nz-form-control style="margin-top: 60px !important">
                        <button class="button-login"  type="submit" (click)="submit()"
                            [disabled]="tellphoneForm.invalid">登陆</button>
                    </nz-form-control>
                </nz-form-item>
            </form>
        </div>
        <div class="login-form-footer" style="display: flex">
            <a class="fortget-password" (click)="toPage('pages/password/reset')">
                忘记密码？
            </a>
            <a style="flex: 1 1 auto;"></a>
            <a class="register" (click)="toPage('pages/register')">
                注册
            </a>
        </div>
    </div>
</app-common-page>